<template>
  <div class="item">
    <div class="top">投诉建议列表</div>
    <hr />

    <div class="w">
      <div class="filter" :model="formInline">
        <el-form
          :inline="true"
          class="demo-form-inline"
          ref="formInline"
          size="mini"
        >
          <el-form-item label="投诉标题:" prop="key">
            <el-input
              v-model="formInline.key"
              placeholder="投诉标题"
            ></el-input>
          </el-form-item>

          <el-form-item label="地址:" prop="address">
            <el-input
              v-model="formInline.address"
              placeholder="地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话:" prop="tel">
            <el-input v-model="formInline.tel" placeholder="电话"></el-input>
          </el-form-item>

          <el-form-item label="按时间查询:" prop="begindate">
            <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
          </el-form-item>

          <el-form-item label="投诉状态" prop="state">
            <el-select v-model="formInline.state" placeholder="请选者">
              <el-option
                v-for="item in statusList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item><br>

          <el-form-item label="投诉类型" prop="type">
            <el-select v-model="formInline.type" placeholder="请选者">
              <el-option
                v-for="item in genreList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="居民:" prop="userid">
            <el-input
              v-model="formInline.userid"
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSearch"
              >查询</el-button
            > </el-form-item
          ><br />

          <el-form-item>
                <el-button type="danger" @click="handleDelete">批量删除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="rowClass"
        class="centers"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="id"
          label="id"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="typename"
          label="问题类型"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="问题地址"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="content"
          label="问题描述"
          width="180"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="statename"
          label="处理状态"
          width="170"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="业主名称"
          width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="tel"
          label="业主电话"
          width="180"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="addtime"
          label="维修日期"
          width="220"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="danger" size="mim"  @click="delect(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <div class="table-footer" v-if="tableData.length > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.page"
        :page-sizes="[5, 10, 15, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// import {deletes} from '../../utils/utils'
export default {
  props: {
    priviceList: {
      type: Array,
    },
    hospitalList: {
      type: Array,
    },
  },
  data() {
    return {
      multipleSelection:'',
      total:0,
        tableData:[],
        formInline: {
        key: "", //投诉
        address: "", //地址
        tel: "", //电话
        begindate: "", //时间
        state: "", //投诉状态
        type: "", //投诉类型
        userid: "", //居民
        // multipleSelection: [],
        formInline: {
            psize: 2, //每页显示多少条 默认是2
            page: 1, //页码 默认是 1
        },
      },
      statusList:[],//状态
      genreList:[],//类型
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: ''
    };
  },
  mounted(){
      this.fxy()
      this.token()
      this.getstatusList()
      this.getgenreList()

  },
  methods: {
    async handleDelete(){
      if(this.multipleSelection.length==0) {
        this.$message({
          type:'warning',
          message:'请勾选你删除的数据'
        })
      }else{
        let ids=[]
        this.multipleSelection.forEach(item=>{
          ids.push(item.id)
        })
        let res=await deletes ({
          ids:ids
        })
        if(res.errCode=='10000') {
          this.$message({
            type:'success',
            message:'删除成功'
          })
          this.fxy()
        }
      }
    },
    handleSelectionChange(val){
      this.multipleSelection=val
    },
    rowClass({row,rowIndex}){
      console.log(rowIndex);
      return "background:reba(242, 242, 242, 1)";
    },
    onSearch() {
      this.$emit("emtFormLine", this.formInline);
    },
    onRest() {
      this.formInline.city = "";
      this.$refs.formInline.resetFields();
    },
    handleSizeChange(val) {
      this.formInline.psize = val;
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.onSearch();
    },
    token(){
        axios.post('http://estate.eshareedu.cn/estate/api/administrator/checklogin',{username:'qqq',pass:'qqq'}).then(res=>{
            console.log(res);
            // const token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dpbk5hbWUiOiJxcXEiLCJ1c2VyVHlwZSI6IkFETUlOIiwiZXhwIjoxNjQ1NTc3NzkwfQ.ieOGXK3DsxQZvo4iIv_u8plgwaWDJL7c05RK45IN9EE"
            sessionStorage.setItem("token",res.data.data.token)
        })
    },
    fxy(){//列表接口
        let token=sessionStorage.getItem("token",token)
        const params={
            Authorization:token
        }
      axios.get("http://estate.eshareedu.cn/estate/api/questions/list", { headers:params }).then((res) => {
        const { errCode, data, counts } = res.data;
        if (errCode == "10000") {
          this.tableData = data.list;
          this.loading = false;
          this.total = data.counts;
        }
        console.log(res.data);
      });
    },
    
      delect(val) {//单删
        const params={
            Authorization:sessionStorage.getItem('token')
        }
        this.$confirm('确认删除吗?','警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
            axios.get('http://estate.eshareedu.cn/estate/api/questions/delete?id='+val,{headers:params}).then(res=>{
                this.tableData=[]
                this.fxy()
            })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        console.log(val);
      },
      getstatusList() {//投诉问题
        let token=sessionStorage.getItem("token",token)
        const params={
            Authorization:token
        }
      axios.get('http://estate.eshareedu.cn/estate/api/questionstate/list',{headers:params}).then((res) => {
        const { errCode, data } = res.data;
        if (errCode == "10000") {
          this.statusList = data.list;
        }
        
      });
      },
      getgenreList() {//投诉类型
        let token=sessionStorage.getItem("token",token)
        const params={
            Authorization:token
        }
      axios.get('http://estate.eshareedu.cn/estate/api/questiontype/list',{headers:params}).then((res) => {
        const { errCode, data } = res.data;
        if (errCode == "10000") {
          this.genreList = data.list;
        }
        
      });
      },
      //查询数据
    onSearch() {
      let token=sessionStorage.getItem("token",token)
      const param=this.formInline
        const para={
            Authorization:token
        }
      axios.get("http://estate.eshareedu.cn/estate/api/questions/list", { headers:para,params:param }).then((res) => {
        console.log(param);
        const { errCode, data, counts } = res.data;
        if (errCode == "10000") {
          this.tableData = data.list;
          this.loading = false;
          this.total=data.counts
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.item {
  width: 1700px;
  .top {
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: blue;
    font-size: 18px;
    margin-left: 15px;
  }
  .w {
    width: 1600px;
    margin: 0 auto;
    margin-top: 30px;
    .table-footer {
      text-align: center;
      margin-top: 20px;
    }
    .centers {
      text-align: center;
    }
  }
}
</style>